<template>
  <view class="complaints_box">
    <binary-layout
      leftText="提交后请耐心等待我们的处理结果,谢谢配合"
      :size="32"
      color="rgb(244, 184, 21)"
    />

    <!-- 输入内容、上传图片 -->
    <view class="input">
      <uni-easyinput
        type="textarea"
        :inputBorder="false"
        :styles="textareaStyles"
        :placeholderStyle="placeholderStyle"
        autoHeight
        trim="both"
        v-model="dataText"
        placeholder="请尽可能的描述事情的经过,1000字以内"
        maxlength="1000"
      />

      <uni-file-picker
        limit="9"
        v-model="imageValue"
        file-extname="png,jpg,svg"
        :imageStyles="imageStyles"
        title="最多选择9张图片"
        @select="selectFile"
        @delete="deleteFile"
      />
    </view>

    <view class="precautions">
      <binary-layout
        :leftText="'填写内容注意事项:'"
        :size="30"
        color="rgb(250, 139, 48)"
      />
      <binary-layout
        :size="28"
        v-for="(item, index) in precautionsList"
        :key="index"
        :middleText="`${item}`"
      >
        <template #left>
          <view>{{ `${index + 1}、` }}</view>
        </template>
      </binary-layout>
    </view>
  </view>
  <button-click :isBottom="true" msg="提交" @on-click="submit" />
</template>

<!-- 投诉页面 -->
<script lang="ts" setup>
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import uniFilePicker from '@/components/common/uni-file-picker/components/uni-file-picker/uni-file-picker.vue'
import { ReqUploadImage } from '@/api/upload'
import buttonClick from '@/components/common/button_click/button-click.vue'
import uniEasyinput from '@/components/common/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import { ref } from 'vue'
import { ReqAddComplaintFeedback } from '@/api/complaintFeedback'
import { onLoad } from '@dcloudio/uni-app'

//注意事项
const precautionsList = ref([
  '请告诉我们事件发生的具体日期和时间，例如：2023年5月15日，下午3点左右。',
  '如果适用，请描述事件发生的地点（线上或线下地址）或使用的平台、服务场景。',
  '详细描述问题发生的整个过程。包括您采取的行动、遇到的具体情况、任何错误信息或对话内容等。',
  '如果有任何额外的信息或背景情况认为对我们理解问题有帮助，请一并提供。',
  '您希望我们如何解决此问题？是否有具体的诉求或建议？',
  '越详细的信息，越能加速问题的解决进程。请尽量避免使用模糊词汇，如‘不好’、‘有问题’等，而是具体描述实际情况。',
])

//内容文本框样式
const textareaStyles = ref({
  wordBreak: 'break-all',
  borderColor: 'rgb(246, 168, 59) !important',
})

//为聚焦时的样式
const placeholderStyle = ref('font-size:28rpx')

//输入内容
const dataText = ref('')

//图片样式
const imageStyles = ref({
  width: 110,
  height: 110,
  border: {
    radius: '10rpx',
  },
})

//文件上传返回路径存储数组
const imgList = ref<string[]>([])

//防止重复点击
const isReq = ref(true)

//分类
const category = ref()

//图片回显数组
const imageValue = ref<any>([])

//图片文件选中时触发
const selectFile = (e: any) => {
  //上传文件
  if (e.tempFilePaths && e.tempFilePaths.length > 0) {
    e.tempFilePaths.forEach((f: string) => {
      ReqUploadImage(f)
        .then((res) => {
          if (res.code == 200 && res.data) {
            imgList.value.push(res.data[0])
          }
        })
        .catch((err) => {
          console.log(err)
        })
    })
  }
}

//图片文件删除时触发
const deleteFile = (e: any) => {
  imageValue.value.splice(e.index, 1)
  imgList.value.splice(e.index, 1)
}

//提交
const submit = () => {
  if (dataText.value == '' || !dataText.value) {
    uni.showToast({
      title: '请描述事情经过',
      icon: 'none',
      mask: true,
    })
    return
  }
  if (!isReq.value) {
    return
  }
  isReq.value = false
  let query = {
    img: imgList.value.join(','),
    msg: dataText.value,
    category: category.value,
  }
  console.log(query)
  ReqAddComplaintFeedback(query).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: res.data ? '提交成功' : '提交失败',
        icon: 'none',
        mask: true,
      })
      if (res.data) {
        setTimeout(() => {
          uni.navigateBack({ delta: 1 })
        }, 500)
      }
    }
  })
}

//页面记载
onLoad((e) => {
  if (e && e.category) {
    category.value = e.category
  }
})
</script>

<style scoped lang="scss">
.complaints_box {
  padding: 0 30rpx;
  width: calc(100% - 60rpx);

  .input {
    padding: 10rpx 20rpx;
    width: calc(100% - 40rpx);
    border: 2rpx solid rgba(238, 214, 167, 0.415);
    border-radius: 10rpx;
  }

  .precautions {
    margin-top: 30rpx;
  }
}
</style>
